<html xmlns="http://www.w3.org/1999/xhtml">
 <head></head>
 <body>   
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>js文字向左无缝滚动</title>   
<style type="text/css">
        .qimo8{ overflow:hidden; width:815px;}
        .qimo8 .qimo {/*width:99999999px;*/width:8000%; height:30px;}
        .qimo8 .qimo div{ float:left;}
        .qimo8 .qimo ul{float:left; overflow:hidden; zoom:1; }
        .qimo8 .qimo ul li{ text-align: center; width: 160px; float:left; line-height:30px; list-style:none; margin-right:18px;}
        .qimo8 .qimo ul li img {width: 160px;height: 130px;}
        .qimo8 li a{color:#444444;}
    </style>
                <div id="demo" class="qimo8">
                    <div class="qimo">
                        <div id="demo1">
                            <ul>
                                <li> <a href="#"><img src="{dede:global.cfg_templets_skin/}/images/cbc4.jpg" /> <br />回收站里的文件1</a> </li>
                                <li> <a href="#"><img src="{dede:global.cfg_templets_skin/}/images/cbc4.jpg" /> <br />回收站里的文件2</a> </li>
                                <li> <a href="#"><img src="{dede:global.cfg_templets_skin/}/images/cbc4.jpg" /> <br />回收站里的文件3</a> </li>
                                <li> <a href="#"><img src="{dede:global.cfg_templets_skin/}/images/cbc4.jpg" /> <br />回收站里的文件4</a> </li>
                                <li> <a href="#"><img src="{dede:global.cfg_templets_skin/}/images/cbc4.jpg" /> <br />回收站里的文件5</a> </li>
                            </ul>
                        </div>
                        <div id="demo2"></div>
                    </div>
                </div>
                <script type="text/javascript">
                    var demo = document.getElementById("demo");
                    var demo1 = document.getElementById("demo1");
                    var demo2 = document.getElementById("demo2");
                    demo2.innerHTML=document.getElementById("demo1").innerHTML;
                    function Marquee(){
                        if(demo.scrollLeft-demo2.offsetWidth>=0){
                            demo.scrollLeft-=demo1.offsetWidth;
                        }
                        else{
                            demo.scrollLeft++;
                        }
                    }
                    var myvar=setInterval(Marquee,30);
                    demo.onmouseout=function (){myvar=setInterval(Marquee,30);}
                    demo.onmouseover=function(){clearInterval(myvar);}
                </script>
    
 </body>
</html>